<template>
	<a-menu mode="horizontal" :items="items" />
	<a-drawer
		v-model:open="openMenuTop"
		class="custom-class"
		root-class-name="root-class-name"
		:root-style="{ color: 'blue' }"
		style=""
		:height="500"
		placement="top"
		:closable="true"
	>
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane :key="0" tab="围栏管理">
				<a-button class="editable-add-btn" style="margin-bottom: 8px" @click="renderList">查询</a-button>
				
				<a-table :dataSource="govAreaList" :columns="columnsTable" >
                
                    <template #bodyCell="{ record, column }">
                        <template v-if="column.key === 'operation'">
							<a-space wrap>
								<a-button @click="editAreaOverlay(record)" type="link">编辑</a-button>
								<a-button @click="deleteAreaOverlay(record)" type="link">删除</a-button>
							</a-space>
                        </template>
                    </template>

                </a-table>
			</a-tab-pane>

			<a-tab-pane :key="1" tab="线路管理">
				<a-button class="editable-add-btn" style="margin-bottom: 8px" @click="renderLineList">查询</a-button>
				
				<a-table :dataSource="govLineList" :columns="columnsLineTable" >
                
                    <template #bodyCell="{ record, column }">
                        <template v-if="column.key === 'operation'">
							<a-space wrap>
								<a-button @click="editLineOverlay(record)" type="link">编辑</a-button>
								<a-button @click="deleteLineOverlay(record)" type="link">删除</a-button>
							</a-space>
                        </template>
                    </template>

                </a-table>
			</a-tab-pane>
			
			<a-tab-pane v-for="pane in panes" :key="pane.key" key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
		</a-tabs>
	</a-drawer>
</template>
<script setup>
import { h, ref, onMounted, defineProps, watch } from 'vue';
import { message } from 'ant-design-vue';
const props = defineProps({
	showDrawer: Function,
	showDrawerLine: Function,
	updateList: String,
	depTypes: Object,
	depTypeChange: Function,
	toggleDrawer1: Function,
	onCloseMenu: Function
})

watch(()=>props.updateList,(newValue)=>{
	renderList()
	renderLineList()
})

import { getItems, updateItem, deleteItem } from '../db';
const openMenuTop = ref(false);
const selectedKeys = ref(['sub2']);

const editAreaOverlay = (item) => {
	props.showDrawer(item.key?item.key:item.id,'govArea')
	props.onCloseMenu()
	hideDrawerMenuTop()
	// updateItemInDB(item)
};
const deleteAreaOverlay = async (item) => {
	await deleteItem('govArea',item.key?item.key:item.id)
	message.success('已删除'+item.name);
	renderList(false)
};

const editLineOverlay = (item) => {
	props.showDrawerLine(item.key?item.key:item.id,'govLine')
	props.onCloseMenu()
	hideDrawerMenuTop()
	// updateItemInDB(item)
};
const deleteLineOverlay = async (item) => {
	await deleteItem('govLine',item.key?item.key:item.id)
	message.success('已删除'+item.name);
	renderLineList(false)
};

const showDrawerMenuTop = () => {
	openMenuTop.value = true;
};
const hideDrawerMenuTop = () => {
	openMenuTop.value = false;
};
// const updateItemInDB = async () => {
//   if (editingItem.value) {
//     await updateItem(editingItem.value.id, editingItem.value);
//     items.value = await getItems();
//     editingItem.value = null;
//   }
// };

const areaTypeStrings = {
	govArea: '行政区域',
	polygon: '多边形',
}

onMounted(async ()=>{
    govAreaList.value = await getItems('govArea');
    govLineList.value = await getItems('govLine');

	govAreaList.value.forEach(item=>{
		item['areaType'] = areaTypeStrings[item['areaType']]
		item['byShare'] = (item['byShare']?'全局':'全局')
		item['byDependency'] = (item['byDependency']?'是':'否')
		item['limitSpeed'] = (item['limitSpeed']?'限速区域/线路':'进出区域/线路')
	})
	govLineList.value.forEach(item=>{
		item['areaType'] = areaTypeStrings[item['areaType']]
		item['byShare'] = (item['byShare']?'全局':'全局')
		item['byDependency'] = (item['byDependency']?'是':'否')
		item['limitSpeed'] = (item['limitSpeed']?'限速区域/线路':'进出区域/线路')
	})
})


const messageQueue = new Set();

function showUniqueMessage(msg) {
  if (!messageQueue.has(msg)) {
    message.success(msg);
    messageQueue.add(msg);

    setTimeout(() => {
      messageQueue.delete(msg);
    }, 2000); // 消息显示时间，假设为 3 秒
  }
}

/**
 * 
 * @param {Boolean} showMsg 是否显示窗口
 */
const renderList = async (showMsg=true)=>{
	govAreaList.value = await getItems('govArea');

	govAreaList.value.forEach(item=>{
		item['areaType'] = areaTypeStrings[item['areaType']]
		item['byShare'] = (item['byShare']?'全局':'全局')
		item['byDependency'] = (item['byDependency']?'是':'否')
		item['limitSpeed'] = (item['limitSpeed']?'限速区域/线路':'进出区域/线路')
	})
	
	showMsg && showUniqueMessage('数据加载完毕');
}
const renderLineList = async (showMsg=true)=>{
    govLineList.value = await getItems('govLine');

	govLineList.value.forEach(item=>{
		item['areaType'] = areaTypeStrings[item['areaType']]
		item['byShare'] = (item['byShare']?'全局':'全局')
		item['byDependency'] = (item['byDependency']?'是':'否')
		item['limitSpeed'] = (item['limitSpeed']?'限速区域/线路':'进出区域/线路')
	})

	showMsg && showUniqueMessage('数据加载完毕');
}

const govAreaList = ref([
        {
            key:2,
            "alarmType": "进区域报警给驾驶员,进区域报警给平台,",
            "areaId": 1,
            "epidemicRisk": "无风险",
            "areaType": "govArea",
            "areaTypeStr": "行政区域",
            "byShare": true,
            "name": "1111",
            "byDependency": "是",
            "userName": "管理员",
            "createDate": "2024-07-15 11:47:43",
            "limitSpeed": "限速区域/线路",
            "points": '106.824327,38.163396;106.771057,38.018858;106.762677,38.003179;106.802264,37.943905;106.878588,37.831278;106.650011,37.655477;106.444398,37.735742;106.323712,37.810263;106.286637,37.832031;106.284792,37.848835;106.283028,37.86582;106.339305,37.873827;106.357797,37.885659;106.338178,37.926458;106.300811,37.975252;106.259199,38.007576;106.258335,38.017828;106.239269,38.036389;106.22296,38.061369;106.20929,38.081171;106.200837,38.134628;106.164881,38.152385;106.125554,38.164504;106.093312,38.181821;106.077097,38.204001;106.057582,38.190032;106.00947,38.180953;105.967366,38.149627;105.920412,38.24089;105.859949,38.280743;105.856312,38.31013;105.832144,38.343167;105.823561,38.371464;105.82832,38.409026;105.840511,38.437411;105.837152,38.47164;105.844683,38.508242;105.862856,38.55121;105.872965,38.583027;105.856146,38.618843;105.865316,38.654274;105.887993,38.685619;105.895666,38.722882;105.901881,38.758706;105.902118,38.790076;105.939322,38.813836;105.974933,38.845592;106.004811,38.875348;106.047479,38.869209;106.090744,38.845792;106.127579,38.830671;106.167162,38.815643;106.196365,38.807196;106.22818,38.813353;106.24908,38.798568;106.280563,38.78776;106.299374,38.785881;106.313078,38.774453;106.397738,38.752509;106.436886,38.709204;106.454087,38.699367;106.480148,38.707519;106.522025,38.697861;106.544426,38.686912;106.569509,38.682157;106.59586,38.668542;106.645918,38.467953;106.511412,38.336779;106.509358,38.300563;106.541672,38.275544;106.585605,38.252666;106.627061,38.232762;106.657988,38.228324;106.684641,38.217924;106.719502,38.205526;106.74677,38.189027;106.792094,38.169445'
        },
]);
const govLineList = ref([])

const columnsTable = ref([
	{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '围栏类型',
		dataIndex: 'areaType',
		key: 'areaType',
	},
	{
		title: '围栏用途',
		dataIndex: 'limitSpeed',
		key: 'limitSpeed',
	},
	{
		title: '是否属地',
		dataIndex: 'byDependency',
		key: 'byDependency',
	},
	// {
	// title: '疫情风险',
	// dataIndex: 'epidemicRisk',
	// key: 'epidemicRisk',
	// },
	{
		title: '报警类型',
		dataIndex: 'alarmType',
		key: 'alarmType',
	},
	{
		title: '共享设置',
		dataIndex: 'byShare',
		key: 'byShare',
	},
	{
		title: '创建时间',
		dataIndex: 'createDate',
		key: 'createDate',
	},
	{
		title: '创建人',
		dataIndex: 'userName',
		key: 'userName',
	},
	{
		title: '操作',
		key: 'operation',
		fixed: 'right',
		width: 170,
	},
])

const columnsLineTable = ref([
	{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '围栏用途',
		dataIndex: 'limitSpeed',
		key: 'limitSpeed',
	},
	{
		title: '报警类型',
		dataIndex: 'alarmType',
		key: 'alarmType',
	},
	{
		title: '共享设置',
		dataIndex: 'byShare',
		key: 'byShare',
	},
	{
		title: '创建时间',
		dataIndex: 'createDate',
		key: 'createDate',
	},
	{
		title: '创建人',
		dataIndex: 'userName',
		key: 'userName',
	},
	{
		title: '操作',
		key: 'operation',
		fixed: 'right',
		width: 170,
	},
])

const drawerTitle = ref('标题');
const panes = ref(
  new Array(0).fill(null).map((_, index) => {
    const id = String(index + 1);
    return {
      title: `Tab ${id}`,
      content: `Content of Tab Pane ${id}`,
      key: id,
    };
  }),
);
const activeKey = ref(1);
const newTabIndex = ref(0);
const add = () => {
  activeKey.value = `newTab${newTabIndex.value++}`;
  panes.value.push({
    title: `New Tab ${activeKey.value}`,
    content: `Content of new Tab ${activeKey.value}`,
    key: activeKey.value,
  });
};

import {
	MailOutlined,
	AppstoreOutlined,
	SettingOutlined,
} from '@ant-design/icons-vue';
const current = ref(['mail']);
const items = ref([
	// {
	//   key: 'app',
	//   icon: () => h(AppstoreOutlined),
	//   label: 'Navigation Two',
	//   title: 'Navigation Two',
	// },
	{
		key: 'sub1',
		icon: () => h(SettingOutlined),
		label: '监控管理',
		title: '监控管理',
		children: [
			{
				label: '围栏管理',
				onClick: () => {
					drawerTitle.value = '围栏管理';
					activeKey.value = 0
					showDrawerMenuTop();
				},
			},{
				label: '线路管理',
				onClick: () => {
					drawerTitle.value = '线路管理';
					activeKey.value = 1
					showDrawerMenuTop();
				},
			},{
				label: '地图操作',
				onClick: () => {
					props.toggleDrawer1()
				},
			}
		],
		
	},
	// {
	// 	label: '数据来源',
	// 	children:[
	// 		{
	// 			label: '宁东镇',
	// 			onClick: () => {
	// 				props.depTypeChange('ningdongList')
	// 			},
	// 		},
	// 		{
	// 			label: '交通厅政务',
	// 			disabled: true
	// 		},
	// 		{
	// 			label: '中交大数据',
	// 			disabled: true
	// 		},
	// 		{
	// 			label: '封闭化园区',
	// 			onClick: () => {
	// 				props.depTypeChange('fengbiallList')
	// 			},
	// 		},
	// 		{
	// 			label: '泰达停车场',
	// 			disabled: true
	// 		},
	// 		{
	// 			label: '交警卡口源',
	// 			disabled: true
	// 		},
	// 	]
	// },
	// {
	// 	label: '交通厅政务',
	// 	children:[
	// 		{
	// 			label: '交警卡口'
	// 		}
	// 	]
	// },
	// {
	//   key: 'alipay',
	//   label: h(
	//     'a',
	//     {
	//       href: 'https://antdv.com',
	//       target: '_blank',
	//     },
	//     'Navigation Four - Link',
	//   ),
	//   title: 'Navigation Four - Link',
	// },
]);
const columns = [
	{
		name: 'Name',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: 'Age',
		dataIndex: 'age',
		key: 'age',
	},
	{
		title: 'Address',
		dataIndex: 'address',
		key: 'address',
	},
	{
		title: 'Tags',
		key: 'tags',
		dataIndex: 'tags',
	},
	{
		title: 'Action',
		key: 'action',
	},
];
const data = [
	{
		key: '1',
		name: 'John Brown',
		age: 32,
		address: 'New York No. 1 Lake Park',
		tags: ['nice', 'developer'],
	},
	{
		key: '2',
		name: 'Jim Green',
		age: 42,
		address: 'London No. 1 Lake Park',
		tags: ['loser'],
	},
	{
		key: '3',
		name: 'Joe Black',
		age: 32,
		address: 'Sidney No. 1 Lake Park',
		tags: ['cool', 'teacher'],
	},
];
</script>
